<div class="con">
  <div class="side left"></div>
  <div class="side right"></div>
  <div class="side rightAbove"></div>
  <div class="side bottom"></div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: loader, animated, effect loader */
.con {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: 60px 50px;
  -webkit-animation: spin 3s infinite;
  animation: spin 3s infinite;
}

.side {
  width: 110px;
  height: 30px;
  background: white;
  position: absolute;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.side:before, .side:after {
  content: "";
  display: block;
  position: absolute;
}

.side:before {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 20px solid #fff;
  border-top: 35px solid #111;
  left: 0;
}

.side:after {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 20px solid #111;
  border-bottom: 35px solid transparent;
  right: 0;
}

.left {
  left: 0px;
  transform: rotate(120deg);
  z-index: 2;
}

.right, .rightAbove {
  transform: rotate(-120deg);
  right: -30px;
  top: 50px;
}

.rightAbove {
  clip: rect(0px 90px 30px 0);
  z-index: 4;
}

.under {
  z-index: 1;
}

.bottom {
  left: -24px;
  bottom: 30px;
  z-index: 3;
}

@-webkit-keyframes spin {
  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

@keyframes spin {
  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(720deg);
  }
}
</style>
